<!-- <template>
  <div class="error-page">
    <div class="img" style="background-image: url('/img/404.svg')"></div>
    <div class="content">
      <h1>404</h1>
      <div class="desc">抱歉，你访问的页面不存在</div>
      <div class="actions">
        <router-link :to="{ path: '/' }">
          <el-button type="primary">返回首页</el-button>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'error-404',
};
</script>
<style lang="scss" scoped>
@import './style.scss';
</style> -->
<template>

    <!-- <el-date-picker v-model="selectDate" type="date" placeholder="Pick a day" @change="handleSelectDate" />
    <el-button icon="ArrowLeft" circle @click="handleLeftBtn" />
    <el-button icon="ArrowRight" circle @click="handleRightBtn" /> -->
    <div style="position: relative;height: 100%">
        <div id="mycalendar" style="height: 100%">
    </div>
    <div id="popup" style="position:  baseline; left:500px,top:500px; z-index:9999; background-color: red">
  <p>这是一个弹窗</p>
    </div> 
   
</div>
 
</template>
<script>
import Calendar from '@toast-ui/calendar';
import '@toast-ui/calendar/dist/toastui-calendar.min.css';
// import 'tui-date-picker/dist/tui-date-picker.min.css';
// import 'tui-time-picker/dist/tui-time-picker.min.css';
import dayjs from 'dayjs'
import { v4 as uuidv4 } from 'uuid'
export default {
    data() {
        return {
            useCreatePopup: true,
            useDetailPopup: true,
            calendar: undefined,
            selectDate: ''
        }
    },
    methods: {
        init() {
            this.calendar = new Calendar('#mycalendar', {
                defaultView: 'week',
                scheduleView: ['time'],
                // useFormPopup: this.useCreatePopup,
                // useDetailPopup: this.useDetailPopup,
                usageStatistics: false,
                template: {
                    // time(title) { // 模板显示内容
                    //     return `${dayjs(title.start).format('HH:mm')} -         
                    //         ${dayjs(title.end).format('HH:mm')}`
                    // },
                    timegridDisplayPrimaryTime({ time }) { //左边时间显示内容
                        return `${dayjs(time).format('HH:mm')}`
                    },
                    milestone: function (model) {
                        return '<span class="calendar-font-icon ic-milestone-b"></span> <span style="background-color: ' + model.bgColor + '">' + model.title + '</span>';
                    },
                    popupIsAllday() {
                        return 'All day';
                    },
                    popupStateBusy() {
                        return '忙碌';
                    },
                   
                    popupStateFree() {
                        return '空闲';
                    },
                    popupEdit() {
                        console.log(`output->popupEdit`)
                        return '编辑';
                    },
                    popupDelete() {
                        return '删除';
                    },
                    popupDetailTitle({ title }) {
                        return title;
                    },
                    popupDetailLocation({ location }) {
                        return location;
                    },
                },
                week: {
                    // taskView: false
                    dayNames: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
                    startDayOfWeek: 1,
                    narrowWeekend: false,
                    workweek: false,
                    showNowIndicator: true,
                    showTimezoneCollapseButton: false,
                    timezonesCollapsed: false,
                    hourStart: 0,
                    hourEnd: 24,
                    eventView: ['time'],
                    taskView: false,
                    collapseDuplicateEvents: true,
                }
                
            });
            this.calendar.createEvents([
                {
                    id: uuidv4(),
                    title: 'Weekly Meeting',
                    start: new Date(Date.now()),
                    end: new Date(Date.now() + 30 * 60 * 1000),
                    backgroundColor: 'red',
                    dragBackgroundColor: 'red',
                    borderColor: 'red',
                },
            ]);
            // 创建
            this.calendar.on("beforeCreateEvent", (e) => {
                console.log("创建", e)
                this.calendar.createEvents([
                    {
                        id: uuidv4(),
                        calendarId: 'cal1',
                        title: e.title,
                        start: e.start.d.d,
                        end: e.end.d.d,
                        isAllday: e.isAllday,
                        location: e.location,
                        state: e.state,
                        color: '#fff',
                        backgroundColor: 'red',
                        dragBackgroundColor: 'red',
                        borderColor: 'red',
                        customStyle: {
                            fontStyle: 'italic',
                            fontSize: '15px',
                        },
                    }, // EventObject
                ])
            })
            //修改
            this.calendar.on('beforeUpdateEvent', (e) => {
                console.log("修改", e)
                const targetEvent = e.event;
                const changes = { ...e.changes };
                this.calendar.updateEvent(targetEvent.id, targetEvent.calendarId, changes);
            });
            //删除
            this.calendar.on('beforeDeleteEvent', (e) => {
                console.log("删除", e)
                this.calendar.deleteEvent(e.id, e.calendarId);
            });


            this.calendar.on('clickEvent', (e) => {
                const schedule = e.schedule;
                const popup = document.getElementById('popup');
                // popup.style.display = 'flex'; // 显示弹窗
                

                popup.style.left= e.nativeEvent.srcElement.getClientRects()[0].right +5+'px'; //鼠标目前在X轴上的位置，加10是为了向右边移动10个px方便看到内容
                popup.style.top= e.nativeEvent.srcElement.getClientRects()[0].top +5+'px';
                popup.style.position="absolute"; //必须指定这个属性，否则div3层无法跟着鼠标动
                console.log("clickEvent",e.nativeEvent, e.nativeEvent.srcElement.getClientRects()) 
                // 可以在这里添加更多的弹窗逻辑，比如使用确认按钮来删除日程等
            });

        },
        handleLeftBtn() {
            this.calendar.prev()
        },
        handleRightBtn() {
            this.calendar.next()
        },
        handleSelectDate() {
            this.calendar.setDate(this.selectDate)
        }
    },
    mounted() {
        this.init()
    }
}
</script>
<style scoped>
.mycalendar{

}
</style>